<!--
  大乐透彩球选择器
-->
<template>
  <div class="ball-group flex-wrap">
    <div class="mb-2" style="flex-basis: 14.2857%" :key="n" v-for="n in num">
      <b class="ball" :class="{on: value.includes(n)}" @click="select(n)">{{n | pad}}</b>
    </div>
  </div>
</template>

<script>
import { compare } from '../../utils/arrays'

export default {
  name: 'ball-group',
  props: {
    group: String,  // 玩法名
    num: Number,    // 玩法名
    max: Number,    // 最大选择数
    value: {        // 绑定号码数组
      type: Array,
      default: function () {
        return []
      }
    },
    conflict: {    // 冲突数组
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    select (n) {
      var {value, group, conflict, max} = this
      var selected = value.slice()
      var idx = selected.indexOf(n)
      if (idx >= 0) {
        selected.splice(idx, 1)
      } else {
        // 最大球数限制
        if (max && selected.length + 1 > max) {
          return this.$toast('最多只能选择' + max + '个' + group)
        }
        /* 若有冲突的列表，先移除冲突列表中的相应号码 */
        if (conflict) {
          idx = conflict.indexOf(n)
          if (idx > -1) {
            conflict.splice(idx, 1)
          }
        }
        selected.push(n)
      }
      this.$emit('input', selected.sort(compare))
    }
  }
}
</script>
